<template>
    <div class="largeScreen-2">
        <div class="largeScreen-2-title"><span class="gradient-text">职工采购品类预览</span></div>
        <div class="largeScreen-2-select" >
            <div class="se-btn " @click="change(item)" :class=" item.isSelected ? 'active_btn' :''" v-for="item,index in datebtn" :key="index">{{ item.text }}</div>
        </div>
        <div id="largeScreen3-2" style="width: 100%;height:55%;"></div>
        <div class="largeScreen-2-con">
            <div class="largeScreen-2-con-item" v-for="item,index in data" :key="index">
                <div class="largeScreen-2-con-item-color" :style="{background:item.itemStyle.color}"></div>
                <div class="largeScreen-2-con-item-title">{{ item.name }}</div>
                <div class="largeScreen-2-con-item-value">{{ item.value}}%</div>
            </div>

        </div>
    </div>
</template>


<script>
import * as echarts from 'echarts'
import 'echarts-gl';
export default {
    components: {},

    data() {
        return {
            type:'',
            data: [],
            datebtn:[
                {
                text: '近7天',
                isSelected:true,
                type:'1'
            },
                {
                text: '近30天',
                isSelected:false,
                type:'2'
            },
                {
                text: '历史总计',
                isSelected:false,
                type:''
            },
        ],
        };
    },
    beforeDestroy() {
        // 组件销毁时清除定时器
        if (this.refreshInterval) {
            clearInterval(this.refreshInterval);
        }
    },
    methods: {
        init() {
            var myChart = echarts.init(document.getElementById('largeScreen3-2'));
            let myDate = [10, 3, 4, 2, 6, 5]
            const optionsData = [
                {
                    name: "景区",
                    value: 0,
                    itemStyle: {
                        color: "#7652FC",
                    },
                },

                {
                    name: "购物",
                    value: myDate[1],
                    itemStyle: {
                        color: "#6993FF",
                    },
                },
                {
                    name: "娱乐",
                    value: myDate[2],
                    itemStyle: {
                        color: "#9BD342",
                    },
                },
                {
                    name: "交通",
                    value: myDate[3],
                    itemStyle: {
                        //   opacity: 0.5,
                        color: "#FFD900",
                    },
                },
                {
                    name: "住宿",
                    value: myDate[4],
                    itemStyle: {
                        //   opacity: 0.5,
                        color: "#AA4CD3",
                    },
                },
                {
                    name: "餐饮",
                    value: myDate[5],
                    itemStyle: {
                        //   opacity: 0.5,
                        color: "#00ADEF",
                    },
                },
            ];
            // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
            function getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                h
            ) {
                // 计算
                let midRatio = (startRatio + endRatio) / 2;

                let startRadian = startRatio * Math.PI * 2;
                let endRadian = endRatio * Math.PI * 2;
                let midRadian = midRatio * Math.PI * 2;

                // 如果只有一个扇形，则不实现选中效果。
                // if (startRatio === 0 && endRatio === 1) {
                //     isSelected = false;
                // }
                isSelected = false;
                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
                k = typeof k !== "undefined" ? k : 1 / 3;

                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
                let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
                let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;

                // 计算高亮效果的放大比例（未高亮，则比例为 1）
                let hoverRate = isHovered ? 1.05 : 1;

                // 返回曲面参数方程
                return {
                    u: {
                        min: -Math.PI,
                        max: Math.PI * 3,
                        step: Math.PI / 32,
                    },

                    v: {
                        min: 0,
                        max: Math.PI * 2,
                        step: Math.PI / 20,
                    },

                    x: function (u, v) {
                        if (u < startRadian) {
                            return (
                                offsetX +
                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
                            );
                        }
                        if (u > endRadian) {
                            return (
                                offsetX +
                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
                            );
                        }
                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
                    },

                    y: function (u, v) {
                        if (u < startRadian) {
                            return (
                                offsetY +
                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
                            );
                        }
                        if (u > endRadian) {
                            return (
                                offsetY +
                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
                            );
                        }
                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
                    },

                    z: function (u, v) {
                        if (u < -Math.PI * 0.5) {
                            return Math.sin(u);
                        }
                        if (u > Math.PI * 2.5) {
                            return Math.sin(u) * h * 0.1;
                        }
                        return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
                    },
                };
            }

            // 生成模拟 3D 饼图的配置项
            function getPie3D(pieData, internalDiameterRatio) {
                let series = [];
                let sumValue = 0;
                let startValue = 0;
                let endValue = 0;
                let legendData = [];
                let k =
                    typeof internalDiameterRatio !== "undefined"
                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
                        : 1 / 3;

                // 为每一个饼图数据，生成一个 series-surface 配置
                for (let i = 0; i < pieData.length; i++) {
                    sumValue += pieData[i].value;

                    let seriesItem = {
                        name:
                            typeof pieData[i].name === "undefined"
                                ? `series${i}`
                                : pieData[i].name,
                        type: "surface",
                        parametric: true,
                        wireframe: {
                            show: false,
                        },
                        pieData: pieData[i],
                        pieStatus: {
                            selected: false,
                            hovered: false,
                            k: 1 / 10,
                        },
                    };

                    if (typeof pieData[i].itemStyle != "undefined") {
                        let itemStyle = {};

                        typeof pieData[i].itemStyle.color != "undefined"
                            ? (itemStyle.color = pieData[i].itemStyle.color)
                            : null;
                        typeof pieData[i].itemStyle.opacity != "undefined"
                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
                            : null;

                        seriesItem.itemStyle = itemStyle;
                    }
                    series.push(seriesItem);
                }

                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
                for (let i = 0; i < series.length; i++) {
                    endValue = startValue + series[i].pieData.value;

                    series[i].pieData.startRatio = startValue / sumValue;
                    series[i].pieData.endRatio = endValue / sumValue;
                    series[i].parametricEquation = getParametricEquation(
                        series[i].pieData.startRatio,
                        series[i].pieData.endRatio,
                        false,
                        false,
                        k,
                        series[i].pieData.value
                    );

                    startValue = endValue;

                    legendData.push(series[i].name);
                }


                return series;
            }

            const series = getPie3D(this.data, 0.6); // 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环
            series.push({
                name: "pie2d",
                type: "pie",
                label: {
                    opacity: 1,
                    lineHeight: 24,
                    textStyle: {
                        fontSize: 0,
                        color: "#fff",
                    },
                },
                labelLine: {
                    normal: {
                        length: 30,
                        length2: 200,
                        lineStyle: {
                            // color: '#e6e6e6'
                            width: 0,
                        },
                    },
                },
                startAngle: 300, //起始角度，支持范围[0, 360]。
                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
                radius: ["36%", "46%"],
                center: ["50%", "50%"],
                data: this.data,
                itemStyle: {
                    opacity: 0,
                },
            });
            // 准备待返回的配置项，把准备好的 legendData、series 传入。
            let option = {
                animation: true,
                title: {
                    x: "center",
                    top: "20",
                    textStyle: {
                        color: "#fff",
                        fontSize: 22,
                    },
                },


                xAxis3D: {
                    min: -1,
                    max: 1,
                },
                yAxis3D: {
                    min: -1,
                    max: 1,
                },
                zAxis3D: {
                    min: -1,
                    max: 1,
                },
                grid3D: {
                    show: false,
                    boxHeight: 26,
                    left: "26%",
                    width: "50%",
                    // environment: "rgba(255,255,255,0)",
                    viewControl: {
                        distance: 240,
                        alpha: 35,
                        beta: 70,
                        autoRotate: false, // 自动旋转
                        rotateSensitivity: 1,
                        zoomSensitivity: 0,
                        panSensitivity: 0,
                    },
                },
                series: series,
            };
            myChart.setOption(option);
        },
        async change(item){
            this.datebtn.forEach(item => item.isSelected = false)
            item.isSelected = true;
            this.type = item.type;
            await this.getLargeData(item.type)
            this.init();
        },
        async getLargeData(type) {
            const res = await this.$axios.get(`https://api.gygsjcpt.cn/api/visualization1/data_6?type=${type}`)
            this.data = res.data.data
        },
    },
    async mounted() {
        await this.getLargeData(1)
        this.init();
        this.refreshInterval = setInterval(async () => {
            if (this.type == '') {
                this.type = 1
                this.datebtn.forEach(item => item.isSelected = false)
                this.datebtn[1].isSelected = true
                await this.getLargeData(1)
                this.init();
            }else if(this.type == 1){
                this.type = 2
                this.datebtn.forEach(item => item.isSelected = false)
                this.datebtn[2].isSelected = true
                await this.getLargeData(2)
                this.init();
            }else if(this.type == 2){
                this.type = ''
                this.datebtn.forEach(item => item.isSelected = false)
                this.datebtn[0].isSelected = true
                await this.getLargeData('')
                this.init();
            }
        }, 300000);
    },
    watch: {

    }
};
</script>

<style lang="scss" scoped>
.largeScreen-2 {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #05133b30 0%, #00206f30 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .largeScreen-2-title {
        color: #fff;
        width: 100%;
        font-size: 17px;
        letter-spacing: 2px;
        height: 15%;
        padding-left: 20%;
        background: url('https://api.gygsjcpt.cn/pcimg/title_bg_short.png');
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        margin-bottom: 5%;
    }

    .largeScreen-2-select {
        justify-content: space-between;
        display: flex;
        color: #fff;
        width: 90%;

        .se-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            padding: 5px 12px;
            border-radius: 20px;
            border: 1px solid #06318c;
            cursor: pointer;
        }

        .active_btn {
            background: linear-gradient(to right, #239dfa, #032d75);
        }
    }

    .largeScreen-2-con {
        height: 25%;
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        flex-wrap: wrap;
        grid-template-columns: repeat(2, 50%);

        .largeScreen-2-con-item {
            width: 50%;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            overflow: hidden;
            margin-bottom: 5px;

            .largeScreen-2-con-item-color {
                width: 6px;
                height: 6px;
                flex-shrink: 0;
                background: #000;


            }

            .largeScreen-2-con-item-title {
                display: flex;
                font-size: 12px;
                margin: 0 5px;
                width: 42%;
                white-space: nowrap;
                /* 确保文本在一行内显示 */
                overflow: hidden;
                /* 隐藏溢出的内容 */
                text-overflow: ellipsis;
                /* 使用省略号表示溢出的文本 */

            }

            .largeScreen-2-con-item-value {
                display: flex;
                font-size: 12px;
            }
        }
    }
}
</style>